<template>

  <v-container id="inventoryIndexContainer" fluid class="custom-container bgWhite" align="center"
               v-touch="{  right:()=>swipe('right')}" justify="center">

    <xy-header-top :title='material.name | strAbbr7'>
      <v-btn :ripple="false" icon slot="left" small @click="routerBack">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>

    <v-card flat>

      <div ref="subItemsWrapper" style="height: 400px;">
        <v-card-text style="min-height: 450px">
          <v-list>
            <template v-for="(item, index) in subItems">
              <v-list-item :key="index">
                <v-list-item-content @click="subItemClickHandle(item)">
                  <v-list-item-title>批次：{{item.batchNo}}</v-list-item-title>
                  <v-list-item-title>入库时间：{{item.createTime|datetimeFormat}}</v-list-item-title>
                  <v-list-item-title>过期时间：{{item.expireTime|datetimeFormat}}</v-list-item-title>
                  <v-list-item-title>入库量：{{item.quantity}}&nbsp;{{item.unit.name}}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-divider></v-divider>
            </template>
          </v-list>
          <xy-scroll-status-bar :scroll-end="subItemIsEnd" :loading="loading"></xy-scroll-status-bar>
        </v-card-text>
      </div>
    </v-card>

  </v-container>

</template>

<script>
    import BScroll from 'better-scroll'
    import moment from 'moment';


    /**
     * 某物料的入库批次
     * @author Canaan
     * @date 2019/8/28 9:15.
     */
    export default {
        name: 'inventoryList',
        mounted() {
            if (!this.$route.query.materialId) {
                this.$message.warning("物料id为空");
                return;
            }

            this.material = {
                id: this.$route.query.materialId,
                name: this.$route.query.materialName
            };
            this.loadData();

            this.subItemScroll = new BScroll(this.$refs.subItemsWrapper, {
                startY: 0,
                startX: 0,
                scrollY: true,
                scrollX: false,
                scrollbar: false,
                click: true,
                tap: true,
                pullUpLoad: true,
                pullDownRefresh: true
            });

            this.subItemScroll.on('pullingDown', () => {
                this.reloadData();
            });

            this.subItemScroll.on('pullingUp', () => {
                this.appendSubItem();
            });

        },
        components: {},
        props: {},
        data() {
            return {
                material: {
                    name: null,
                    id: null
                },
                subItems: [],
                pageNo: 1,
                subItemIsEnd: false,
                subItemScroll: null,
                limit: 10,
                loading: false
            }
        },
        computed: {},
        methods: {
            routerBack() {
                this.$router.back()
            },
            swipe(cmd) {
                switch (cmd) {
                    case 'right':
                        this.$router.back();
                        break;
                }
            },
            appendSubItem() {
                this.pageNo = this.pageNo + 1;
                this.loadData()
                    .then(() => {
                        this.subItemScroll.refresh();
                        this.subItemScroll.finishPullUp();
                    });
            },
            reloadData() {
                this.pageNo = 1;
                this.loading = false;
                this.subItemIsEnd = false;
                this.subItems = [];
                this.loadData()
                    .then(() => {
                        this.subItemScroll.refresh();
                        this.subItemScroll.finishPullDown();
                    });

            },
            loadData() {
                if (this.subItemIsEnd || this.loading) {
                    return new Promise((resolve) => {
                        resolve(null);
                    });
                }

                this.loading = true;
                return this.$ajax.get('inventory/paging', {
                    params: {
                        pageNo: this.pageNo,
                        limit: this.limit,
                        materialId: this.material.id,
                        createTimeLE: moment().add(40, 'days').valueOf()
                    }
                }).then(res => {
                    this.loading = false;
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.subItemIsEnd = !res.data.rows || res.data.rows.length < this.limit;
                    this.subItems = this.subItems.concat(res.data.rows);
                    return res;
                })
            },
            subItemClickHandle(inventory) {
                this.$router.push({
                    path: '/inventoryDetail',
                    query: {
                        inventoryId: inventory.id
                    }
                })
            },
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .v-text-field {
    padding-top: 0;
    margin-top: 0;
  }

  .v-list-item__title {
    font-size: 0.8rem;
  }

  .v-list-item {
    align-items: baseline;
  }

  .v-toolbar__title {
    font-size: 1rem;
  }

  .bgWhite {
    background: #fff;
  }

</style>
